// 柱状图侧边栏
let btn = document.querySelector(".bar .btn");
// 第几次成绩列表ul
let batch = document.querySelector(".bar #batch");
// 期望薪资
let avgSalary = document.querySelector(".avgSalary");
// 平均年龄
let avgAge = document.querySelector(".avgAge");
// 男女比列
let proportion = document.querySelector(".proportion");
// 班级人数
let total = document.querySelector(".total");

// 班级概况
axios({
    url:'/student/overview',
    method:'get',
    params:{total,avgSalary,proportion,avgAge}
  }).then(function(res){
    // console.log(2,res.data.data)
    avgAge.innerHTML = res.data.data.avgAge
    proportion.innerHTML = res.data.data.proportion
    total.innerHTML = res.data.data. total
    avgSalary.innerHTML = res.data.data. avgSalary
  })

// 获取学生信息
function init() {
  axios({
    url: "/student/list",
    method: "get",
  }).then(function (res) {
    //   console.log(res)
    // 学员信息，省份属性名称是：province
    // console.log(res)
    // 我们自定义的与图表需求格式一样的数据：生成饼图数据：[{value:数量,name:'省份名称'}]
    let pieData = [];
    //   折线图
    let names = [];
    let salarys = [];
    let truesalarys = [];
    //   地图
    let chinaGeoCoordMap = {};
    let chinaDatas = [];
    res.data.data.forEach(function (value) {
      // 一：改造饼图数据
      let p = pieData.filter(function (v) {
        //  与当前省名称相同的返回
        return v.name == value.province;
      })[0];
      if (p) {
        p.value = p.value + 1;
      } else {
        pieData.push({ name: value.province, value: 1 });
      }
      // 改造折线图
      names.push(value.name);
      salarys.push(value.salary);
      truesalarys.push(value.truesalary);
      // 地图
      chinaGeoCoordMap[value.province] = [value.jing,value.wei]
      chinaDatas.push([{ name: value.province, value: 0 }]);
    });
    addpie(pieData);
    addLine(names, salarys, truesalarys);
      mapChart(chinaGeoCoordMap,chinaDatas)
  });
}
init();

// 按组查询学员成绩
function getScore(batch) {
  axios({
    url: "/score/batch",
    params: { batch },
  }).then((res) => {
    // console.log(res);
    addBar(res.data.data);
    // console.log(addBar(res.data.data) );
  });
}
getScore(1);

// 饼图
function addpie(data) {
  let mychart = echarts.init(document.querySelector(".pie"));
  let option = {
    title: {
      text: "籍贯HOMETOWN",
      subtext: "各地人员分布",
      left: "left",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },

    series: [
      {
        name: "Area Mode",
        type: "pie",
        radius: [20, 140],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 5,
        },
        data: data,
      },
    ],
  };
  mychart.setOption(option);
}

// 线型图
function addLine(names, salarys, truesalarys) {
  // 创建一个图表对象，传入一个有宽度和高度的dom元素
  let mychart = echarts.init(document.querySelector(".line"));
  let option = {
    // 图例
    legend: {
      top: 20,
    },
    // 数据缩放组件
    dataZoom: [
      {
        type: "slider", // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 50, // 拖动滑块结束位置（这是一个百分比）
      },
    ],
    // 鼠标移入的提示
    tooltip: {
      trigger: "axis", // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], "10%"];
      },
    },
    // 标题
    title: {
      text: "薪资 Salary",
      textStyle: {
        color: "#6d767e",
      },
    },
    xAxis: {
      type: "category",
      data: names,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "期望薪资",
        data: salarys,
        type: "line",
        smooth: true,
        lineStyle: {
          color: "red",
        },
      },
      {
        name: "实际薪资",
        data: truesalarys,
        type: "line",
        smooth: true,
        lineStyle: {
          color: "green",
        },
      },
    ],
  };
  // 根据配置选项绘制图表
  mychart.setOption(option);
}

//  柱状图
function addBar(data) {
  // 创建一个图表对象，传入一个有宽度和高度的dom元素
  let mychart = echarts.init(document.querySelector(".barChart"));
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    grid: {
      top: 30,
      bottom: "8%",
      left: "5%",
      right: "5%",
    },
    legend: {
      top: 5,
    },
    xAxis: [
      {
        type: "category",
        data: data.group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    barWidth: "10%",
    series: [
      {
        name: "平均分",
        type: "bar",
        data: data.avgScore,
      },
      {
        name: "低于60分人数",
        type: "bar",
        data: data.lt60,
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      },
      {
        name: "60-80之间",
        type: "bar",
        data: data.gt60,
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      },
      {
        name: "高于80分人数",
        type: "bar",
        data: data.gt80,
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      },
    ],
  };
  // 根据配置选项绘制图表
  mychart.setOption(option);
  // console.log(re.data.data)
}

// 地图
// ----------------------- 地图 ------------------------------
function mapChart(chinaGeoCoordMap, chinaDatas) {
    let myChart = echarts.init(document.querySelector(".map"));
  
    // var chinaGeoCoordMap = {
    //   黑龙江: [127.9688, 45.368],
    //   内蒙古: [110.3467, 41.4899],
    //   吉林: [125.8154, 44.2584],
    //   北京市: [116.4551, 40.2539],
    //   辽宁: [123.1238, 42.1216],
    //   河北: [114.4995, 38.1006],
    //   天津: [117.4219, 39.4189],
    //   山西: [112.3352, 37.9413],
    //   陕西: [109.1162, 34.2004],
    //   甘肃: [103.5901, 36.3043],
    //   宁夏: [106.3586, 38.1775],
    //   青海: [101.4038, 36.8207],
    //   新疆: [87.9236, 43.5883],
    //   西藏: [91.11, 29.97],
    //   四川: [103.9526, 30.7617],
    //   重庆: [108.384366, 30.439702],
    //   山东: [117.1582, 36.8701],
    //   河南: [113.4668, 34.6234],
    //   江苏: [118.8062, 31.9208],
    //   安徽: [117.29, 32.0581],
    //   湖北: [114.3896, 30.6628],
    //   浙江: [119.5313, 29.8773],
    //   福建: [119.4543, 25.9222],
    //   江西: [116.0046, 28.6633],
    //   湖南: [113.0823, 28.2568],
    //   贵州: [106.6992, 26.7682],
    //   云南: [102.9199, 25.4663],
    //   广东: [113.12244, 23.009505],
    //   广西: [108.479, 23.1152],
    //   海南: [110.3893, 19.8516],
    //   上海: [121.4648, 31.2891],
    // };
    // var chinaDatas = [
    //   [
    //     {
    //       name: "黑龙江",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "内蒙古",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "吉林",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "辽宁",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "河北",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "天津",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "山西",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "陕西",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "甘肃",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "宁夏",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "青海",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "新疆",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "西藏",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "四川",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "重庆",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "山东",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "河南",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "江苏",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "安徽",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "湖北",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "浙江",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "福建",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "江西",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "湖南",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "贵州",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "广西",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "海南",
    //       value: 0,
    //     },
    //   ],
    //   [
    //     {
    //       name: "上海",
    //       value: 1,
    //     },
    //   ],
    // ];
  
    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [113.272004, 23.131614];
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value,
            },
            {
              coord: toCoord,
            },
          ]);
        }
      }
      return res;
    };
    var series = [];
    [["广东省", chinaDatas]].forEach(function (item, i) {
      console.log(item);
      series.push(
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: convertData(item[1]),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name;
              },
              fontSize: 13,
            },
            emphasis: {
              show: true,
            },
          },
          symbol: "circle",
          symbolSize: function (val) {
            return 5 + val[2] * 5; //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: "#f00",
            },
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
            };
          }),
        },
        //被攻击点
        {
          type: "scatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: "stroke",
            scale: 4,
          },
          label: {
            normal: {
              show: true,
              position: "right",
              //offset:[5, 0],
              color: "#0f0",
              formatter: "{b}",
              textStyle: {
                color: "#0f0",
              },
            },
            emphasis: {
              show: true,
              color: "#f60",
            },
          },
          symbol: "pin",
          symbolSize: 50,
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            },
          ],
        }
      );
    });
  
    //
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: "来京路线 From",
        textStyle: {
          color: "#6d767e",
        },
      },
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(166, 200, 76, 0.82)",
        borderColor: "#FFFFCC",
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: "z-index:100",
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        },
      },
      backgroundColor: "#fff",
      visualMap: {
        // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
        textStyle: {
          color: "#fff",
        },
      },
      geo: {
        map: "china",
        zoom: 1.2,
        label: {
          emphasis: {
            show: false,
          },
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: "rgba(51, 69, 89, .5)", //地图背景色
            borderColor: "#516a89", //省市边界线00fcff 516a89
            borderWidth: 1,
          },
          emphasis: {
            color: "rgba(37, 43, 61, .5)", //悬浮背景
          },
        },
      },
      series: series,
    };
  
    myChart.setOption(option);
  }
